<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<?php /** @var $block \Magento\Swatches\Block\Product\Renderer\Configurable */ ?>
<div class="swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>"></div>
<script>
    require([
        'jquery',
        'jquery/ui',
        'Magento_Swatches/js/swatch-renderer',
        'Magento_Swatches/js/catalog-add-to-cart',
        'priceBox'
    ], function ($) {
        var jsonConfig = <?php /* @escapeNotVerified */ echo $block->getJsonConfig(); ?>;

        $('.swatch-opt-<?php /* @escapeNotVerified */ echo $block->getProduct()->getId() ?>').SwatchRenderer({
            selectorProduct: '.product-item-details',
            onlySwatches: true,
            enableControlLabel: false,
            numberToShow: <?php /* @escapeNotVerified */ echo $block->getNumberSwatchesPerProduct(); ?>,
            jsonConfig: jsonConfig,
            jsonSwatchConfig: <?php /* @escapeNotVerified */ echo $block->getJsonSwatchConfig(); ?>,
            mediaCallback: '<?php /* @escapeNotVerified */ echo $block->getMediaCallback() ?>'
        });

        var dataPriceBoxSelector = '[data-role=priceBox]',
            dataProductIdSelector = '[data-product-id=<?php echo $block->escapeHtml($block->getProduct()->getId())?>]',
            priceBoxes = $(dataPriceBoxSelector + dataProductIdSelector);

        priceBoxes.priceBox({
            'priceConfig': {
                priceFormat: jsonConfig.priceFormat,
                prices: jsonConfig.prices
            }
        });
    });
</script>
